<template>
    <div class="container">
        <div class="card">
            <div class="top">
                <span class="left">{{ title }}</span>
                <span class="right">查看更多<i class="el-icon-arrow-right"></i></span>
            </div>
            <DoubleColumnAppCard :apps="apps" />
        </div>
    </div>
</template>

<script>
import DoubleColumnAppCard from "@/components/DoubleColumnAppCard.vue"
export default {
    name: "VerticalAppCard",
    props: {
        title: {
            type: String,
            default: "标题"
        },
        apps: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    components: { DoubleColumnAppCard }
}
</script>

<style lang="scss" scoped>
.container {
    width: 968px;
    margin: auto;

    .card {
        margin-top: 24px;

        .top {
            .left {
                font-size: 20px;
                text-overflow: ellipsis;
                font-weight: bold;
            }

            .right {
                opacity: 0.6;
                font-weight: 400;
                cursor: pointer;
                float: right;
            }
        }
    }
}
</style>